﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>富文本编辑器 - WangEditor</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入WangEditor -->
    <script src="https://cdn.jsdelivr.net/npm/wangeditor@4.7.15/dist/wangEditor.min.js"></script>
    <!-- 引入Element Plus -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <!-- 引入Axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <style>
        body {
            background-color: #f5f7fa;
        }

        .editor-box {
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            transition: all 0.2s;
        }

            .editor-box:focus-within {
                border-color: #3b82f6;
                box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
            }
    </style>
</head>
<body class="min-h-screen p-4 md:p-8">
    <div id="app" class="max-w-4xl mx-auto">
        <header class="mb-6">
            <h1 class="text-2xl md:text-3xl font-bold text-gray-800">富文本编辑器</h1>
            <p class="text-gray-500 mt-1">编辑内容 → 保存到后端 + 本地存储</p>
        </header>

        <!-- 编辑器区域 -->
        <div class="bg-white rounded-lg shadow-sm p-5 mb-6">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-lg font-semibold text-gray-700">编辑内容</h2>
                <el-button type="primary" @click="saveContent" icon="el-icon-save">
                    保存内容
                </el-button>
            </div>
            <div id="editor" class="editor-box min-h-[300px] p-3"></div>
            <div id="saveStatus" class="mt-3 hidden px-3 py-2 rounded text-sm"></div>
        </div>

        <!-- 显示区域 -->
        <div class="bg-white rounded-lg shadow-sm p-5">
            <h2 class="text-lg font-semibold text-gray-700 mb-4">显示内容</h2>
            <div id="contentDisplay" class="min-h-[200px] p-4 border border-gray-200 rounded-md text-gray-800">
                <div class="text-gray-400 text-center py-10">
                    <i class="fa fa-file-text-o text-3xl mb-2"></i>
                    <p>保存内容后将在这里显示</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 初始化Element Plus
        const { createApp, ref, onMounted } = Vue;
        const app = createApp({
            setup() {
                let editor = null;
                
                // 初始化编辑器
                const initEditor = () => {
                    editor = new wangEditor('#editor');
                    editor.config.uploadImgShowBase64 = true;
                    editor.config.height = 300;
                    editor.config.menus = [
                        'head', 'bold', 'fontSize', 'fontName', 'italic', 'underline',
                        'foreColor', 'backColor', 'link', 'list', 'justify', 'quote',
                        'emoticon', 'image', 'table', 'undo', 'redo'
                    ];
                    editor.create();
                    
                    // 加载本地存储的内容
                    const savedContent = localStorage.getItem('richTextContent');
                    if (savedContent) {
                        editor.txt.html(savedContent);
                        document.getElementById('contentDisplay').innerHTML = savedContent;
                    }
                };
                
                // 保存内容
                const saveContent = async () => {
                    const content = editor.txt.html().trim();
                    if (!content) {
                        ElMessage.warning('请输入内容后再保存');
                        return;
                    }
                    
                    // 显示加载中
                    const loading = ElLoading.service({
                        lock: true,
                        text: '保存中...',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    
                    try {
                        // 保存到本地存储
                        localStorage.setItem('richTextContent', content);
                        
                        // 配置Axios请求
                        axios.defaults.headers.post['Content-Type'] = 'application/json';
                        
                        // 发送请求到后端
                        const response = await axios.post(
                            "/Home/insert",
                            { name: content }
                        );
                        
                        // 处理响应
                        if (response.data.success) {
                            document.getElementById('contentDisplay').innerHTML = content;
                            ElMessage.success('内容保存成功（后端+本地）');
                        } else {
                            ElMessage.error(`保存失败: ${response.data.message}`);
                        }
                    } catch (error) {
                        console.error('保存出错:', error);
                        ElMessage.error(`保存失败: ${error.message || '服务器错误'}`);
                    } finally {
                        // 关闭加载
                        loading.close();
                    }
                };
                
                // 监听Ctrl+S快捷键
                const handleKeydown = (e) => {
                    if (e.ctrlKey && e.key === 's') {
                        e.preventDefault();
                        saveContent();
                    }
                };
                
                // 组件挂载时初始化
                onMounted(() => {
                    initEditor();
                    document.addEventListener('keydown', handleKeydown);
                });
                
                return {
                    saveContent
                };
            }
        });
        
        // 使用Element Plus
        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html>
